<template>
  <el-row>
    <div class="news" v-show="showList">
      <div class="news-table">
        <el-row v-for="(item, index) in tableData" :key="index" class="news-rows" @click.native="openDetail(item.newsId, item.times)">
          <el-col :span="20">{{item.newsTitle}}</el-col>
          <el-col :span="4">{{item.publishTime}}</el-col>
        </el-row>
      </div>
      <div class="news-pagination">
        <el-pagination
          @current-change="onCurrentChange"
          layout="prev, pager, next"
          :page-size="pageObj.pageSize"
          :total="pageObj.total">
        </el-pagination>
      </div>
    </div>
    <div v-if="!showList">
      <news-detail :showList.sync="showList" :newsId="newsId" :times="times" @onReturn="onReturn"></news-detail>
    </div>
  </el-row>
</template>
<script>
import NewsDetail from '../components/news-detail';
import api from '../api';

export default {
  components: {
    NewsDetail
  },
  data() {
    return {
      tableData: [],
      pageObj: {
        page: 1,
        pageSize: 5,
        total: 0
      },
      showList: true,
      newsId: undefined,
      times: undefined
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getNewsList();
    },
    getNewsList() {
      const params = {
        page: this.pageObj.page,
        pageSize: this.pageObj.pageSize
      };
      api.getNewsList(params).then((data) => {
        this.tableData = data.data;
        this.pageObj.total = data.total;
      });
    },
    onCurrentChange(page) {
      this.pageObj.page = page;
      this.getNewsList();
    },
    openDetail(newsId, times) {
      this.newsId = newsId;
      this.times = times;
      this.showList = false;
    },
    onReturn() {
      this.getNewsList();
      // this.tableData = data.data;
      // this.pageObj.total = data.total;
    }
  }
};
</script>
<style scoped lang="scss">
  .news {
    margin-top: 40px;
    &-table {
      height: 300px;
    }
    &-rows {
      cursor: pointer;
      height: 60px;
      line-height: 60px;
      border-bottom: 1px dashed #a9a9a9;
      &:hover {
        color: #db9d36;
      }
    }
    &-pagination {
      margin: 0 auto;
      width: 50%;
    }
  }
</style>
